<template>
  <div class="fillWrap">
    <a-form
      layout="vertical"
      :model="formState"
      name="basic"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item label="巡检路线名称" name="name" :rules="[{ required: true, message: '请填写巡检路线名称' }]">
        <a-input v-model:value="formState.name" />
      </a-form-item>
      <a-form-item
        label="巡检路线责任人"
        name="personLiable"
        :rules="[{ required: true, message: '请填写巡检路线责任人' }]"
      >
        <a-input v-model:value="formState.personLiable" />
      </a-form-item>
      <!-- <a-form-item label="巡检时间周期" name="date" :rules="[{ required: true, message: '请选择巡检时间周期' }]">
				<a-select ref="select" v-model:value="formState.date">
					<a-select-option value="jack">Jack</a-select-option>
					<a-select-option value="lucy">Lucy</a-select-option>
					<a-select-option value="Yiminghe">yiminghe</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="开始时间" name="time" :rules="[{ required: true, message: '请选择时间' }]">
				<a-date-picker v-model:value="formState.time" />
			</a-form-item> -->
      <a-form-item>
        <!-- <a-button class="cancel">取消</a-button> -->
        <a-button type="primary" html-type="submit" :loading="loading">保存</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup name="fill">
  import { reactive, ref } from 'vue';
  const formState = reactive({
    name: '',
    personLiable: ''
  });
  const loading = ref(false);
  const onFinish = values => {
    console.log('Success:', values);
  };
  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };
</script>

<style lang="less" scoped>
  @bgcolor: rgba(242, 243, 245, 1);
  .fillWrap {
    height: 100%;
    background-color: #fff;
    padding: 22px 30px;
    .ant-form {
      height: 100%;
      position: relative;
    }
    .ant-form-item:last-child {
      margin-bottom: 0;
      right: 0px;
      bottom: 0px;
      position: absolute;
      .cancel {
        margin-right: 8px;
      }
    }
    :deep(.ant-form-item-explain-error) {
      font-size: 12px;
    }
    :deep(.ant-input) {
      background: @bgcolor !important;
      border-color: @bgcolor;
      box-shadow: none;
    }
    :deep(.ant-select) {
      .ant-select-selector {
        background: @bgcolor !important;
        border-color: @bgcolor !important;
        box-shadow: none !important;
      }
    }
    :deep(.ant-picker) {
      width: 100%;
      background: @bgcolor !important;
      border-color: @bgcolor;
      box-shadow: none;
    }
  }
</style>
